<template>
  <!-- <div class="content" style="">
    <span style="font-size: 17px; margin-left: 10%; font-weight: light"
      >文章列表</span
    >
  </div> -->
  <div>
    <a-button type="primary" @click="onClickTab()" style="margin-left:78%;margin-bottom: 5px">文章标签管理</a-button>
  </div>
  <a-collapse v-model:activeKey="activeKey" ghost style="margin-left: 10%; width: 80%">
    <a-collapse-panel header="高级搜索" >
      <a-form layout="inline" :model="query" style="margin-bottom: 5px">
        <a-form-item style="width: 150px">
          <a-input v-model:value="query.a_id">
            <template #prefix>文章编号:</template>
          </a-input>
        </a-form-item>

        <a-form-item style="width: 150px">
          <a-input v-model:value="query.a_title">
            <template #prefix>文章标题:</template>
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-select v-model:value="query.a_status">
            <a-select-option value="">不限状态</a-select-option>
            <a-select-option value="0">未经审核</a-select-option>
            <a-select-option value="1">审核通过</a-select-option>
            <a-select-option value="2">审核失败</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="发布日期">
          <a-date-picker
            v-model:value="query.a_date_start"
            placeholder="开始日期"
            valueFormat="YYYY-MM-DD"
          />
          至
          <a-date-picker
            v-model:value="query.a_date_end"
            placeholder="结束日期"
            valueFormat="YYYY-MM-DD"
          />
        </a-form-item>

        <a-form-item>
          <a-button @click="getPage(1)" type="primary"
            ><template #icon><SearchOutlined /></template>查询</a-button
          >
        </a-form-item>
      </a-form>
    </a-collapse-panel>
  </a-collapse>

  <div class="test">
    <a-table
      :columns="columns"
      :data-source="page.list"
      :pagination="pagination"
      @change="handleTableChange"
      :rowKey="(record) => record.a_id"
    >
      <template #action="{ record }">
        <a-button type="primary" ghost @click="singlearticle(record)">
          审核
        </a-button>
      </template>
      <template #a_status="{ record }">
        <template v-if="record.a_status === 0">
          <span>
            <a-tag color="yellow">未经审核</a-tag>
          </span>
        </template>
        <template v-else-if="record.a_status === 1">
          <a-tag color="green">审核通过</a-tag>
        </template>
        <template v-else-if="record.a_status === 2">
          <a-tag color="red">审核失败</a-tag>
        </template>
      </template>
    </a-table>
  </div>

  <article-tab ref="ArticleTabRef"></article-tab>
</template>
<script setup>
import { reactive, ref } from "vue";
import { get} from "@/common";
import { SearchOutlined } from "@ant-design/icons-vue";
import ArticleTab from './articletab.vue';

import { useRoute, useRouter } from "vue-router";
const router = useRouter(); //获取路由器
const route = useRoute(); //获取当前路由器
const ArticleTabRef = ref();

//文章列表
const columns = [
  {
    title: "文章编号",
    dataIndex: "a_id",
    width: "15%",
    slots: {
      customRender: "a_id",
    },
  },
  {
    title: "用户帐号",
    dataIndex: "u_id",
    width: "15%",

    slots: {
      customRender: "u_id",
    },
  },
  {
    title: "文章标题",
    dataIndex: "a_title",
    width: "20%",

    slots: {
      customRender: "a_title",
    },
  },
  
  {
    title: "发布日期",
    dataIndex: "a_date",
    width: "15%",
    slots: {
      customRender: "a_date",
    },
  },
  {
    title: "状态",
    dataIndex: "a_status",
    width: "13%",
    slots: {
      customRender: "a_status",
    },
  },
  {
    title: "操作",
    dataIndex: "action",
    width: "10%",
    slots: {
      customRender: "action",
    },
  },
];

const query = reactive({
  a_id: "",
  a_title: "",
  a_status: "",
  a_date_start: "",
  a_date_end: ""
});

const page = ref({});

const pagination = reactive({
  current: 1, //当前页
  pageSize: 10, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["5", "10", "20", "50", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;

  get("/buser/articlemanage/list", query).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;
  });
};

getPage(1);

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};

const status = reactive({
  a_status: 0,
});

//审核按钮功能
const articleid = reactive({
  a_id: "",
  a_title: "",
  a_html: "",
  u_id: "",
});

const singlearticle = (articlenumber) => {
  articleid.a_id = articlenumber.a_id;
  articleid.a_title = articlenumber.a_title;
  articleid.a_html = articlenumber.a_html;
  articleid.u_id = articlenumber.u_id;
  const jsonStr = JSON.stringify(articleid);
  const encodeStr = encodeURIComponent(jsonStr);
  router.push({
    path: "/buser/singlearticlemanage",
    query: { data: encodeStr },
  });
};

const onClickTab = () => {
  ArticleTabRef.value.open();
};
</script>
<style>
.test {
  width: 80%;
  margin-left: 10%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.search {
  margin-left: 10%;
  margin-top: 1%;
  margin-bottom: 1%;
}
</style>